<template>
  <div class="operate-container">
    <span>操作区</span>
    <input
      type="range"
      name=""
      id=""
      min="100"
      max="500"
      v-model="pageState.size"
    />

    <span>高度:{{ pageState.size }}px</span>
  </div>
</template>
<script setup>
import { reactive, watch, onMounted } from "vue";
const emit = defineEmits(["update:size"]);

const pageState = reactive({
  size: 200,
});

watch(
  () => pageState.size,
  (newVal) => emit("update:size", newVal),
  { immediate: true }
);

onMounted(() => {});
</script>
<style scoped>
.operate-container {
  width: 100%;
  height: 50px;
  background-color: #c0c0c0;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: start;
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 0 20px;
  gap:20px;

  & > input {
    flex:1;
  }
}
</style>
